<template>
	<view class="page">
		<view class="content" v-for="(item,index) in orderList" :key="index">
			<view class="content_image">
				<image :src="item.imageFile" mode=""></image>
			</view>
			<view class="content_more">
				<view class="content_title">
					{{item.name}}
				</view>
				<view>
					<view class="content_title">
						¥{{item.price}}
					</view>
					<view class="comment" @click="jumToComments(item)">
						评价
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk'
	export default {
		data() {
			return {
				orderList:[
					{
						name:'《但是求其爱》钢琴弹唱教程',
						price:3,
						imageFile:'cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/吉他/吉他1.jpg'
					},
					{
						name:'《但是求其爱》钢琴弹唱教程',
						price:3,
						imageFile:'cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/吉他/吉他2.jpg'
					},
					{
						name:'《但是求其爱》钢琴弹唱教程',
						price:3,
						imageFile:'cloud://inspace-v1.696e-inspace-v1-1302892928/classimg/钢琴/钢琴1.jpg'
					},
				]
			}
		},
		created() {
			this.getUrl();
		},
		methods: {
			getUrl: function() {
				let that = this;
				that.orderList.forEach(v => {
					cloudbase.getTempFileURL({
						fileList: [v.imageFile]
					}).then(res => {
						let list = res.fileList;
						v.imageFile = list[0].tempFileURL;
					})
				})
				
			},
			jumToComments: function(item){
				let imageUrl = item.imageFile;
				let name = item.name;
				uni.navigateTo({
					url: '../courseEvaluation/courseEvaluation?imageUrl=' + imageUrl + '&name=' + name
				});
			}
		}
	}
</script>

<style>
	.page {
		width: 750rpx;
		height: 1334rpx;
		/* height: 1020rpx; */
		/* padding-bottom: 60px; */
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #F3F5F7;
	}
	.content{
		width: 702rpx;
		/* height: 300rpx; */
		margin-top: 24rpx;
		margin-right: auto;
		margin-left: auto;
		border-radius: 32rpx;
		background-color: #FFFFFF;
		
	}
	.content_image{
		float: left;
		width: 200rpx;
		/* height: 200rpx; */
		margin: 20rpx 30rpx;
		
	}
	.content_image image{
		width: 210rpx;
		height: 297rpx;
		border-radius: 16rpx;
	}
	.content_more{
		float: right;
		width: 364rpx;
		height: 297rpx;
		margin: 20rpx 50rpx 20rpx 0rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.content_title{
		width: 364rpx;
		height: 40rpx;
		font-size: 28rpx;
		text-align: right;
		margin-top: 10rpx;
		color: #222222;
		line-height: 40rpx;
	}
	.comment{
		width: 120rpx;
		height: 49rpx;
		margin-top: 30rpx;
		margin-left: 244rpx;
		border: 2px solid #FD973F;
		border-radius: 32rpx;
		color: #FD973F;
		font-size: 24rpx;
		text-align: center;
		line-height: 49rpx;
	}
</style>
